<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>实用工具</span>
        <span class="panel-title-num" v-show="taskTotal">{{ taskTotal }}</span>
      </h4>
    </div>

    <el-table :data="tasks" v-loading="loading" border class="table-sm w-100">
      <el-table-column label="工具名称" prop="taskName" align="center"></el-table-column>
      <el-table-column label="未处理/已处理" prop="taskCount" align="center">
        <template slot-scope="scope">
          <span v-if="[100, 101, 101112].includes(scope.row.taskType)">-</span>
          <span v-else>{{ scope.row.taskCount }}/{{ scope.row.process }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showDialog(scope.row)"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <task-letter :visible.sync="letterVisible" :status="status" type="7"></task-letter>

    <task-contrack :visible.sync="contrackVisible" :status="status" type="8"></task-contrack>

    <task-notice :visible.sync="feeVisible" :status="status" type="15"></task-notice>

    <task-report-dialog :visible.sync="reportVisible" type="18192021"></task-report-dialog>

    <maturity-dialog :visible.sync="maturityVisible"></maturity-dialog>

    <sign-task-dialog
      :visible.sync="signVisible"
      :docId="docId"
      type="37,38,39,40"
    ></sign-task-dialog>

    <task-fee :visible.sync="payVisible"></task-fee>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { enumTaskType } from '@/credit/plugins/enumTown'
import TaskLetter from '@/credit/views/county/index/myTask/TaskLetter'
import TaskContrack from '@/credit/views/county/index/myTask/TaskContrack'
import TaskNotice from '@/credit/views/county/index/myTask/TaskNotice'
import TaskReportDialog from '@/credit/views/county/index/myTask/TaskReportDialog'
import MaturityDialog from '@/credit/views/county/index/myTask/MaturityDialog'
import SignTaskDialog from '@/credit/views/county/index/tools/SignToolDialog'
import TaskFee from '@/credit/views/county/index/myTask/TaskFee'
const enumConcat = {
  18192021: '报表工具',
  101112: '保费结算',
  37383940: '电子签章',
}
export default {
  components: {
    TaskLetter,
    TaskContrack,
    TaskNotice,
    TaskReportDialog,
    MaturityDialog,
    SignTaskDialog,
    TaskFee,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
    docId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      //   params: {
      //     index: 1,
      //     size: 5
      //   },
      status: '0',
      tableData: [],
      enumTaskType,
      loading: false,
      letterVisible: false,
      contrackVisible: false,
      maturityVisible: false,
      feeVisible: false,
      arrivalVisible: false,
      reportVisible: false,
      signVisible: false,
      payVisible: false,
    }
  },
  computed: {
    ...mapGetters(['myTaskCount', 'user']),
    isUserProvince() {
      return this.user.orgRegionLever === 1
    },
    tasks() {
      const data = []
      const mustKeys = [37383940, 7, 8, 15]
      // if (+this.user.isApprovalSign === 1) { // 签章管理员
      //   data.push({
      //     taskType: 37383940,
      //     taskName: '电子签章',
      //     taskCount: this.getNum(37383940),
      //     process: this.getProcess(37383940)
      //   })
      // }
      if (!this.isUserProvince) {
        mustKeys.push(18192021)
      }
      mustKeys.forEach(item => {
        data.push({
          taskType: item,
          taskName: enumTaskType[item] || enumConcat[item],
          taskCount: this.getNum(item),
          process: this.getProcess(item),
        })
      })
      data.push(
        {
          taskType: 100,
          taskName: '贷后管理',
          taskCount: 0,
        },
        {
          taskType: 101112,
          taskName: '保费结算',
          taskCount: 0,
        },
        {
          taskType: 101, // 自定义的
          taskName: '还款管理',
          taskCount: 0,
        }
      )
      return data
    },
    totalCount() {
      return this.tasks.length
    },
    taskTotal() {
      return this.tasks.reduce((prev, curr) => prev + curr.taskCount, 0)
    },
  },
  watch: {
    // tasks: {
    //   handler: function () {
    //     this.setData()
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created() {
    if (this.docId) {
      this.signVisible = true
    }
    this.getData()
  },
  mounted() {},
  methods: {
    getTypeNum(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].num) || 0
    },
    getNum(type) {
      switch (type) {
        case 18192021:
          return (
            this.getTypeNum(18) + this.getTypeNum(19) + this.getTypeNum(20) + this.getTypeNum(21)
          )
        case 37383940:
          return [37, 38, 39, 40].reduce((p, c) => {
            p += this.getTypeNum(c)
            return p
          }, 0)
        default:
          return this.getTypeNum(type)
      }
    },
    getTypeProcess(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].process) || 0
    },
    getProcess(type) {
      switch (type) {
        case 18192021:
          return (
            this.getTypeProcess(18) +
            this.getTypeProcess(19) +
            this.getTypeProcess(20) +
            this.getTypeProcess(21)
          )
        case 37383940:
          return [37, 38, 39, 40].reduce((p, c) => {
            p += this.getTypeProcess(c)
            return p
          }, 0)
        default:
          return this.getTypeProcess(type)
      }
    },
    // setData() {
    //   this.tableData = this.tasks.slice((this.params.index - 1) * this.params.size, this.params.index * this.params.size)
    // },
    async getData() {
      this.loading = true
      //   await this.$utils.promise(this.$store.dispatch('getMyTaskCount'))
      this.loading = false
    },
    showDialog(row) {
      switch (+row.taskType) {
        case 7:
          this.letterVisible = true
          break
        case 8:
          this.contrackVisible = true
          break
        case 101:
          this.maturityVisible = true
          break
        case 15:
          this.feeVisible = true
          break
        case 100:
          this.arrivalVisible = true
          break
        case 101112:
          this.payVisible = true
          break
        case 18192021:
          this.reportVisible = true
          break
        case 37383940:
          this.signVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
